Class TabBar extends Box
static var fromIndex=-1;
var body;
var line;
var index=0;
var items;
var color=["#333","#2b2"];
function TabBar(items,index=0){
	this.set({w:"f",h:70,bg:["#fff",[,"#ddd"]]});
	this.addChild([
		[{dim:"body",enabled:false}],
		[{dim:"line",h:2,y:68,enabled:false}]
	]);
	this.items=items;
	this.setIndex(index);
}
function resetSelf(){
	this.body.setSize("f","f");
	var count=this.items.length;
	var cellW=int(this.w/count);
	for(var i=0;i<count;i++){
		var text=this.items[i];
		var label=this.body.children[i];
		if(!label){
			var bg=i<count-1?[,[,,,"#ccc"]]:null;
			label=this.body.addChild([
				[[text],{pos:[i*cellW,"c",cellW,30],lineH:1,align:"c",bg:bg}]
			]);
		}
		label.setColor(this.color[this.index==i?1:0]);
	}
	while(this.body.children.length>count){
		var child=this.body.children[this.body.children.length-1];
		child.remove();
	}
	this.line.setW(cellW);
	this.line.setBg(this.color[1]);
	if(Me.fromIndex>-1){
		this.line.setX(Me.fromIndex*cellW);
		this.line.transit({ease:1});
		Me.fromIndex=-1;
	}
	this.line.setX(this.index*cellW);
}
function setSize(w,h){
	Box.proto.setSize.call(this,w,h);
	this.changeSelf();
}
function setItems(v){
	this.items=v;
	this.changeSelf();
}
function setColor(v){
	this.color=v;
	this.changeSelf();
}
function setIndex(v){
	this.index=v;
	this.changeSelf();
}
function onClick(){
	var index=int((G.x-this.getAbsX())/(this.w/this.items.length));
	if(index==this.index) return;
	Me.fromIndex=this.index;
	this.line.transit({ease:1});
	this.setIndex(index);
	this.dispatchEvent(G.newEvent(Evt.CHANGE));
	if(this.stage) Me.fromIndex=-1;
}